Ext.namespace("MyApp.views.view_row").view_row = new function() {
  var pageId = 'MyApp.views.view_row.view_row';
  
  var panel;
  var templatePanel;
  
  function addInstance() {
    if(MyApp.views.viewport.getComponent(pageId) == null) {
      MyApp.views.viewport.add(getInstance());
    }
  };
  
  function prepareOptions(options, defaultOptions) {
    options = options?options:new Object();
    Ext.applyIf(options, defaultOptions);
    
    return options;
  }
  
  function display(options) {
    var defaultOptions = null;
    
    options = prepareOptions(options, defaultOptions);
    
    addInstance();
      
    MyApp.views.viewport.setActiveItem(pageId, options.animation);

    MyApp.common.sendJsonRequestAndDoOnSuccess({
        url: restPath + '/view-row/view-row-template-data/' + options.id,
        loadIndicator: panel.getEl().id
      }, function (jsonResult) {
        templatePanel.update(jsonResult.data);
      }
    );
  }
  this.display = display;
  
  function getInstance() {
    var toolbar = new Ext.Toolbar({
      dock : 'top',
      title: 'View row',
      items: [
        {
          text: "List rows",
          ui: 'back',
          handler: function () {
            MyApp.views.list_rows.list_rows_table.display({ animation: {
              type: 'slide',
              reverse: true
            }});
          }
        }
      ]
    });
    
    //
    
    var tpl = new Ext.XTemplate(
      '<tpl for=".">',
        'The id of this row is <b>{id}</b> and the stringAttribute has the value: "<b>{stringAttribute:htmlEncode}</b>"',
      '</tpl>'
    );
    
    templatePanel = new Ext.Panel({
      layout: 'fit',
      tpl: tpl,
      styleHtmlContent: true,
      emptyText: 'Nothing to display'
    });
    
    //
    
    var toolbar2 = new Ext.Toolbar({
      dock : 'bottom',
      
      layout: {
        pack: 'center'
      },
      
      items: [
        {
          text: "Edit",
          iconMask: true,
          iconCls: 'compose',
          handler: function () {
          }
        },
        {
          text: "Delete",
          iconMask: true,
          iconCls: 'delete',
          handler: function () {
            MyApp.in_page.delete_row.deleteRow(templatePanel.data.id, function() {
              MyApp.views.list_rows.list_rows_table.display({ animation: {
                type: 'slide',
                reverse: true
              }});
            });
          }
        }
      ]
    });
    
    //
    
    panel = new Ext.Panel({
      id: pageId,
      layout: 'fit',
            
      items: [templatePanel],
      
      dockedItems: [toolbar, toolbar2]
    });
    
    return panel;
  }
}();